<template>
  <div>
    <span class="link el-link--primary" @click="dialogVisible = true">管理</span>
    <el-dialog
      title="管理关联的空间"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      destroy-on-close
      @open="copySpaces"
    >
      <div style="min-height: 16rem;">
        <el-alert v-if="edited" type="warning" :closable="false" title="修改设置后记得在下方点击“保存设置”" />
        <div class="custom-table border-bottom" style="min-width: 32rem;">
          <div
            v-for="(space, i) in reSpaces"
            :key="space.id"
            class="custom-table-item easy-container flex content-space-between p-x-8"
          >
            <div class="title flex align-items-center">
              <el-avatar :src="space.avatar" size="small" class="m-r-5" />
              <span class="line2" style="max-width: 16rem;">{{ space.title }}</span>
            </div>
            <div class="m-l-30">
              <template v-if="!space.deleted">
                <el-button
                  type="success"
                  size="mini"
                  plain
                  @click="handleOrder('top', i)"
                  :disabled="i === 0"
                  v-text="'置顶'"
                />
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  @click="handleOrder('up', i)"
                  :disabled="i === 0"
                  v-text="'上移'"
                />
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  @click="handleOrder('down', i)"
                  :disabled="i === reSpaces.length -1"
                  v-text="'下移'"
                />
              </template>
              <el-button
                v-if="space.deleted"
                type="info"
                size="mini"
                plain
                @click="removeSpace(space)"
                v-text="'移除记录'"
              />
              <el-button
                :type="space.deleted ? 'info' : 'danger'"
                size="mini"
                plain
                @click="handleOrder('delete', i)"
                v-text="space.deleted ? '撤销' : '解除关联'"
              />
            </div>
          </div>
        </div>
      </div>
      <related-spaces-add
        :cur-spaces="validSpacesIds"
        @add="addSpace"
        @revoke="removeSpace"
        class="m-t-16"
      />
      <div class="m-t-16 flex content-space-between">
        <el-button type="primary" @click="onSubmit" :loading="loading">保存设置</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RelatedSpacesAdd from './related-spaces-add';

export default {
  name: 'related-spaces-settings', // 管理关联的空间
  components: { RelatedSpacesAdd },
  props: {
    spaces: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      reSpaces: [],
      loading: false,
      deleted: [],
    };
  },
  computed: {
    edited() {
      const oldSpaces = JSON.stringify(this.spaces);
      const newSpaces = JSON.stringify(this.reSpaces);
      return oldSpaces !== newSpaces;
    },
    validSpacesIds() { return this.reSpaces.filter(s => !s.deleted).map(s => s.id); },
  },
  methods: {
    // 打开的时候拷贝一份空间列表，就不重新请求了
    copySpaces() { this.reSpaces = JSON.parse(JSON.stringify(this.spaces)); },
    // 调整顺序
    handleOrder(action, i) {
      if (action === 'top' && i !== 0) {
        const space = this.reSpaces.splice(i, 1)[0];
        this.reSpaces.unshift(space);
      }
      if (action === 'up' && i !== 0) {
        const space = this.reSpaces.splice(i, 1)[0];
        this.reSpaces.splice(i - 1, 0, space);
      }
      if (action === 'down' && i !== this.reSpaces.length - 1) {
        const space = this.reSpaces.splice(i, 1)[0];
        this.reSpaces.splice(i + 1, 0, space);
      }
      if (action === 'delete') {
        const deleted = this.reSpaces[i].deleted;
        if (!deleted || this.validSpacesIds.length < 5) {
          const obj = Object.assign({}, this.reSpaces[i], { deleted: !deleted });
          this.reSpaces.splice(i, 1, obj);
        } else {
          this.$message.warning('群组当前最多关联5个空间');
        }
      }
    },
    // 添加空间
    addSpace(space) { this.reSpaces.push(space); },
    // 移除空间
    removeSpace(space) {
      const index = this.reSpaces.map(s => s.id).indexOf(space.id);
      if (index > -1) this.reSpaces.splice(index, 1);
    },
    // 保存设置
    onSubmit() {
      this.loading = true;
      this.$api.groups.settingRelatedSpaces({
        groupId: this.$route.params.groupId,
        spacesIds: this.validSpacesIds,
      }).then(() => {
        this.$message.success('保存设置成功');
        this.$emit('saved');
        this.dialogVisible = false;
      })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
